[Theme] Fix typography scss order by mgadewoll · Pull Request #8922 · elastic/eui

mgadewoll · 2025-07-29T10:58:12Z

Summary

This PR updates the shared SCSS typography definitions in eui-theme-common and how they are imported in eui-theme-borealis.

Important

EUI does not officially support SCSS styling anymore. The existing files remain to support Kibana while it migrates off SCSS.

Problem

Based on the import order and variable definition the previous setup would result in the function lineHeightFromBaseline to return unexpected values. This was due to the dependency function convertToRem relying on $euiFontSize which is defined in the same file combined with the order of imports of the SCSS files.

Proposed solution

remove duplicated shared typography SCSS in eui-theme-common which is defined specifically per theme in the themes themselves
leave only actually shared typography SCSS
ensure shared typography SCSS is loaded before theme typography SCSS in eui-theme-borealis

With this update the output matches the results of the CSS-in-JS equivalent euiLineHeightFromBaseline .

// before - $euiFontSize = 16px from eui-theme-common
line-height: lineHeightFromBaseline(2); // results in 1rem

// after - $euiFontSize = 14px from eui-theme-borealis
line-height: lineHeightFromBaseline(2); // results in 1.1429rem

Why are we making this change?

Ensuring that lecagy usages of lineHeightFromBaseline work as expected.

Screenshots

before

after

Impact to users

🟢 There are no changes needed on consumer side.

QA

ℹ️ Testing this requires a SCSS setup. You can either checkout an older EUI tag (e.g. v100.0.0) that still includes the old EUI docs, setup a small CRA project or use Kibana.

🔗 The changes have been tested in Kibana here.
login: https://p.elstc.co/paste/Cl3Ucde+#3Y5wj2XV9c4LQ047r9nsM7M8v6ILnAVtCASYPCQx20u

verify that lineHeightFromBaseline(2) results in 1.1429rem instead of 1rem

General checklist

Browser QA
- ~~Checked in both light and dark modes~~
- Checked in both MacOS and Windows high contrast modes
  - (emulate forced colors if you do not have access to a Windows machine.)
- Checked in mobile
- Checked in Chrome, Safari, Edge, and Firefox
- ~~Checked for accessibility including keyboard-only and screenreader modes~~
Docs site QA
- Added documentation
- Props have proper autodocs (using @default if default values are missing) and playground toggles
- ~~Checked Code Sandbox works for any docs examples~~
Code quality checklist
- Added or updated jest and cypress tests
- Updated visual regression tests
Release checklist
- A changelog entry exists and is marked appropriately.
- ~~If applicable, added the breaking change issue label (and filled out the breaking change checklist)~~
Designer checklist
- If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

- removes unexpected common typography definitions as those are defined in the themes - ensures correct typography file order

packages/eui-theme-borealis/src/variables/_index.scss

packages/eui-theme-common/src/global_styling/variables/_typography.scss

packages/eui-theme-common/changelogs/upcoming/8922.md

elasticmachine · 2025-07-31T10:09:28Z

💚 Build Succeeded

History

💚 Build #922 succeeded 29c6187

cc @mgadewoll

elasticmachine · 2025-07-31T10:23:14Z

💚 Build Succeeded

Buildkite Build
Commit: 72e4c72

History

💚 Build #4488 succeeded 29c6187

cc @mgadewoll

weronikaolejniczak

Thank you for the quick changes, Lene!

There's only one usage of SCSS lineHeightFromBaseline in Kibana:

src/platform/packages/shared/kbn-unified-data-table/src/components/data_table.scss

and that usage is being migrated. So this change is likely very low impact.

🟢 Testing

I tested with the version from this PR in the above-mentioned use case ☝🏻 here's the result:

Before	After
`max-height: lineHeightFromBaseline(2);`	`max-height: lineHeightFromBaseline(2);`
`14px` = `1rem`	`16px` = `1.1429rem`

so it looks alright 👌🏻

- `@elastic/eui`: `v106.2.0` ⏩ `v106.3.0` - `@elastic/eui-theme-borealis`: `v3.3.0` ⏩ `v3.3.1` - `@elastic/eslint-plugin-eui`: `v2.2.1` ⏩ `v2.3.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Package updates ### `@elastic/eui` #### [`v106.3.0`](https://github.com/elastic/eui/releases/v106.3.0) - Added thumbUp and thumbDown icons ([#8937](elastic/eui#8937)) - Removed obsolete IE-specific CSS properties ([#8940](elastic/eui#8940)) - Updated `EuiComboBox` to allow multiline options by disabling virtualization (`rowHeight="auto"`) ([#8934](elastic/eui#8934)) **Bug fixes** - Fixed interactive content in header cells on `EuiDataGrid` not being correctly removed from the tab order ([#8938](elastic/eui#8938)) - Fixed an issue where the validity state of `EuiFieldNumber` did not update when the `isInvalid` prop value changed ([#8952](elastic/eui#8952)) - Reverted a font-size change for `xs` buttons back to `12px` ([#8930](elastic/eui#8930)) - Fixed unexpected results for the SCSS function `lineHeightFromBaseline` ([#8922](elastic/eui#8922)) - Fixed `euiDataGridRow--selected` not applying on `EuiDataGrid` whith `stripes={true}` ([#8925](elastic/eui#8925)) - Fixed `euiDataGridRow--marked` and `euiDataGridRow--selected` applying hover styling on `EuiDataGrid` when `stripes={true}` ([#8925](elastic/eui#8925)) **Accessibility** - Added a screen reader help text for entered interactive cells of `EuiDataGrid` to provide information about exiting cells ([#8938](elastic/eui#8938)) - Added a new beta `EuiLiveAnnouncer` component which supports `aria-live` announcements on mount ([#8916](elastic/eui#8916)) - Added `announceOnMount` prop on `EuiCallOut` to support announcing its content on mount ([#8916](elastic/eui#8916)) ### `@elastic/eui-theme-borealis` #### [`v3.3.1`](https://www.npmjs.com/package/@elastic/eui-theme-borealis/v/3.3.1) **Bug fixes** - Updated shared theme SCSS imports to ensure expected results for the SCSS function `lineHeightFromBaseline` ([#8922](elastic/eui#8922)) ### `@elastic/eslint-plugin-eui` #### [`v2.3.0`](https://www.npmjs.com/package/@elastic/eslint-plugin-eui/v/2.3.0) - Added `EuiFlyoutResizable` to `require-aria-label-for-modals` check ([#8946](elastic/eui#8946)) - Added new `no-unnamed-radio-group` rule. ([#8929](elastic/eui#8929)) - Fixed attributes comparison issue in the `consistent-is-invalid-props` rule. ([#8920](elastic/eui#8920))

- `@elastic/eui`: `v106.2.0` ⏩ `v106.3.0` - `@elastic/eui-theme-borealis`: `v3.3.0` ⏩ `v3.3.1` - `@elastic/eslint-plugin-eui`: `v2.2.1` ⏩ `v2.3.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Package updates ### `@elastic/eui` #### [`v106.3.0`](https://github.com/elastic/eui/releases/v106.3.0) - Added thumbUp and thumbDown icons ([elastic#8937](elastic/eui#8937)) - Removed obsolete IE-specific CSS properties ([elastic#8940](elastic/eui#8940)) - Updated `EuiComboBox` to allow multiline options by disabling virtualization (`rowHeight="auto"`) ([elastic#8934](elastic/eui#8934)) **Bug fixes** - Fixed interactive content in header cells on `EuiDataGrid` not being correctly removed from the tab order ([elastic#8938](elastic/eui#8938)) - Fixed an issue where the validity state of `EuiFieldNumber` did not update when the `isInvalid` prop value changed ([elastic#8952](elastic/eui#8952)) - Reverted a font-size change for `xs` buttons back to `12px` ([elastic#8930](elastic/eui#8930)) - Fixed unexpected results for the SCSS function `lineHeightFromBaseline` ([elastic#8922](elastic/eui#8922)) - Fixed `euiDataGridRow--selected` not applying on `EuiDataGrid` whith `stripes={true}` ([elastic#8925](elastic/eui#8925)) - Fixed `euiDataGridRow--marked` and `euiDataGridRow--selected` applying hover styling on `EuiDataGrid` when `stripes={true}` ([elastic#8925](elastic/eui#8925)) **Accessibility** - Added a screen reader help text for entered interactive cells of `EuiDataGrid` to provide information about exiting cells ([elastic#8938](elastic/eui#8938)) - Added a new beta `EuiLiveAnnouncer` component which supports `aria-live` announcements on mount ([elastic#8916](elastic/eui#8916)) - Added `announceOnMount` prop on `EuiCallOut` to support announcing its content on mount ([elastic#8916](elastic/eui#8916)) ### `@elastic/eui-theme-borealis` #### [`v3.3.1`](https://www.npmjs.com/package/@elastic/eui-theme-borealis/v/3.3.1) **Bug fixes** - Updated shared theme SCSS imports to ensure expected results for the SCSS function `lineHeightFromBaseline` ([elastic#8922](elastic/eui#8922)) ### `@elastic/eslint-plugin-eui` #### [`v2.3.0`](https://www.npmjs.com/package/@elastic/eslint-plugin-eui/v/2.3.0) - Added `EuiFlyoutResizable` to `require-aria-label-for-modals` check ([elastic#8946](elastic/eui#8946)) - Added new `no-unnamed-radio-group` rule. ([elastic#8929](elastic/eui#8929)) - Fixed attributes comparison issue in the `consistent-is-invalid-props` rule. ([elastic#8920](elastic/eui#8920))

refactor: ensure typography variable order

0df2b55

- removes unexpected common typography definitions as those are defined in the themes - ensures correct typography file order

mgadewoll self-assigned this Jul 29, 2025

chore: add changelogs

29c6187

mgadewoll force-pushed the scss/fix-theme-var-order branch from 563fab9 to 29c6187 Compare July 29, 2025 11:15

mgadewoll marked this pull request as ready for review July 29, 2025 13:19

mgadewoll requested a review from a team as a code owner July 29, 2025 13:19

weronikaolejniczak self-requested a review July 29, 2025 13:38

weronikaolejniczak reviewed Jul 31, 2025

View reviewed changes

packages/eui-theme-borealis/src/variables/_index.scss Show resolved Hide resolved

weronikaolejniczak reviewed Jul 31, 2025

View reviewed changes

packages/eui-theme-borealis/src/variables/_index.scss Show resolved Hide resolved

weronikaolejniczak reviewed Jul 31, 2025

View reviewed changes

packages/eui-theme-common/src/global_styling/variables/_typography.scss Show resolved Hide resolved

weronikaolejniczak reviewed Jul 31, 2025

View reviewed changes

packages/eui-theme-common/changelogs/upcoming/8922.md Show resolved Hide resolved

style: group common imports

72e4c72

weronikaolejniczak approved these changes Jul 31, 2025

View reviewed changes

mgadewoll merged commit 3565997 into elastic:main Jul 31, 2025
5 checks passed

weronikaolejniczak mentioned this pull request Aug 11, 2025

Upgrade EUI to v106.3.0 elastic/kibana#231288

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Theme] Fix typography scss order#8922

[Theme] Fix typography scss order#8922
mgadewoll merged 3 commits intoelastic:mainfrom
mgadewoll:scss/fix-theme-var-order

mgadewoll commented Jul 29, 2025 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

elasticmachine commented Jul 31, 2025

Uh oh!

elasticmachine commented Jul 31, 2025

Uh oh!

weronikaolejniczak left a comment •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

mgadewoll commented Jul 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Problem

Proposed solution

Why are we making this change?

Screenshots

Impact to users

QA

General checklist

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

elasticmachine commented Jul 31, 2025

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Jul 31, 2025

💚 Build Succeeded

History

Uh oh!

weronikaolejniczak left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

🟢 Testing

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

mgadewoll commented Jul 29, 2025 •

edited

Loading

weronikaolejniczak left a comment •

edited

Loading